<template>
	<div class="vue-ms-main  vue-ms-main-add" v-loading="loading">
		<div class="ms-top">
			<!-- 当前页标题  -->
			<div class="crumbs fl">
				<el-breadcrumb separator="/">
					<el-breadcrumb-item><i class="el-icon-menu"></i><a @click="$router.push('/storevehicleList')">  pos管理</a> </el-breadcrumb-item>
					<el-breadcrumb-item>pos上传</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
		</div>
		<!--  添加 -->
		<div class = "ms-updmain">
			<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<div class="info">
					<div class="fl upd-model" prop="userName">
						<el-form-item label="posid" prop="posid">
							<el-input type="text" v-model="ruleForm.posid" placeholder="请填写posid" auto-complete="off"></el-input>
						</el-form-item>
					</div>
					<div class="fr upd-model" prop="userName">
						<el-form-item label="filename" prop="filename">
							<el-input type="text" v-model="ruleForm.filename" placeholder="请填写filename" auto-complete="off"></el-input>
							<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
							<el-button @click="resetForm('ruleForm')">重置</el-button>
						</el-form-item>
					</div>
				</div>
				<!--<div class="info">-->
				<!--<div class="fl upd-model" prop="userName">-->
				<!--<el-form-item label="posid" prop="posid">-->
				<!--<el-input type="text" v-model="ruleForm.posid" placeholder="请填写posid" auto-complete="off"></el-input>-->
				<!--</el-form-item>-->
				<!--</div>-->
				<!--<div class="fr upd-model" prop="userName">-->
				<!--<el-form-item label="filename" prop="filename">-->
				<!--<el-input type="text" v-model="ruleForm.filename" placeholder="请填写filename" auto-complete="off"></el-input>-->
				<!--<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>-->
				<!--<el-button @click="resetForm('ruleForm')">重置</el-button>-->
				<!--</el-form-item>-->
				<!--</div>-->
				<!--</div>-->
			</el-form>
		</div>
	</div>
</template>

<script>
    export default {
        data() {
            var checkPosid = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入posid'));
                }else{
                    callback();
                }
            };
            var checkFilename = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入filename'));
                }else{
                    callback();
                }
            };
            return {
                ruleForm: {
                    posid:'',        // posid
                    filename: '',    // filename
                },
                rules: {
                    posid:[
                        { validator: checkPosid, trigger: 'blur' }
                    ],
                    filename: [
                        { validator: checkFilename, trigger: 'blur' }
                    ],
                },
                loading:false,
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url:'http://114.55.56.242:8090/setdnfilepos',
                            type:"get",
                            data:{'key':1,posid:'00000',filename:'000000'},
                            success:function(data){
                                console.log(data);
                                // that.dataList = ;
                            },
                            error: function(jqXHR){
                                that.$message.error('发生错误'+jqXHR.status);
                            }
                        });
                        this.altopen('添加成功！', 'success');
                        // this.loading = true;
                    } else {
                        this.altopen('请把信息填写完整！', 'warning');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            // 公共弹框
            altopen(msg, type) {
                this.$notify({
                    type: type,
                    message: msg,
                    offset: 100,
                });
            },
        }
    }
</script>
<style>
	.img-upd-div{height: 134px; width: 225px; float:left; overflow: hidden;border: #ccc 1px solid;margin-bottom: 5px; margin-right: 5px; position: relative}
	.img-upd-div .el-form-item__error{ position: absolute; bottom: 0px;  text-align: center; left: 0px; width: 100%;}
	.image-list2 .img-uplod{
		position: absolute;
		z-index: 999;
		background: transparent;
		top: -24px;
		width: 100%;
		height: 160px !important;
		color: #fff;
	}
	.vue-ms-main-add .info .fl{margin-right: 0px;}
	/*.vue-ms-main-add .info .fr{width: 500px;}*/
	.vue-ms-main-add .ms-updmain{ padding: 50px 0px;}
	.fr .el-input{width: 200px;}
</style>
